<!-- 直播互动 -->
<template>
	<view>
		<!-- @leftClick="$tools.switchTab('index/index')" -->
		<u-navbar title="选择直播互动" bgColor="transparent" leftIconColor="#fff" :titleStyle="{'color':'#fff'}" placeholder
			autoBack></u-navbar>
		<scroll-view scroll-y="true" style="height: 88vh;" @scrolltolower="ReachBottom">
			<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
				<view class="listBox" v-if="livelist.length>0">
					<view class="pd30 item" v-for="(i,idx) in livelist" @click="handel(i,idx)">
						<view class="dfx box">
							<view class="icon1">
								{{idx+1}}
							</view>
							<view class="info">
								<view class="title">
									{{i.name}}
								</view>
								<view class="num df jb fs26">
									<text>关键词：{{i.keyword}}</text>
									<text>互动回复：{{i.audio_urls.length}} 条</text>
								</view>
							</view>
							<view class="edit">
								<u-checkbox :customStyle="{marginBottom: '8px'}" label=" " :name="i.id">
								</u-checkbox>
							</view>
						</view>
					</view>
				</view>
				<!-- 内容为空 -->
				<u-empty iconColor="#fff" textColor="#fff" marginTop="60" text="暂无直播互动" v-else mode="search"></u-empty>
			</u-checkbox-group>
		</scroll-view>
		<view class="btnBox">
			<view class="btn btn1 cfff" @click="saveChoose">
				添加直播互动
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				show: false,
				isPlay: -1,
				title: '',
				livelist: [],
				checkboxValue: [],
				activeId: '',
				id: '',
				formInline: {
					page: 1,
					limit: 10,
					total: 0
				},
			};
		},
		onLoad(e) {
			if (e && e.id) {
				this.id = e.id
			}
			this.getData()
		},
		onReachBottom() {
			if (this.formInline.total > this.formInline.page) {
				this.formInline.page++
				this.getData();
			}
		},
		methods: {
			ReachBottom() {
				if (this.formInline.total > this.formInline.page) {
					this.formInline.page++
					this.getData();
				}
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			getData() {
				let params = {
					...this.formInline
				}
				this.$api.interactList(params).then(res => {
					if (res.code == 200) {
						this.$nextTick(() => {
							if (this.formInline.page == 1) {
								this.livelist = res.data.list
							} else {
								this.livelist = this.livelist.concat(res.data.list)
							}
							this.formInline.total = res.data.count

							if (this.isOpen && this.isOpen != -1 && this.isOpen != this.livelist.length - 1) {
								console.log('clear');
								this.isOpen = -1
								this.$tools.clearAudio()
							}
						})

						this.$forceUpdate()
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			handel(j) {
				console.log(j);
				if (this.isPlay) {
					this.isPlay = -1
					this.$tools.clearAudio()
				}
				if (this.activeId) {
					if (this.activeId == j.id) {
						this.activeId = ''
						return
					} else {
						this.activeId = ''
					}
				}
				this.$nextTick(() => {
					this.livelist.map((i, index) => {
						if (j.id == i.id) {
							this.activeId = i.id
						}
					})
				})
				this.$forceUpdate()
			},
			saveChoose() {
				let params = {
					interact_ids: this.checkboxValue,
					explain_id: this.id
				}
				this.$api.addExplainInteract(params).then(res => {
					this.$tools.toast(res.msg);
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	/deep/.u-navbar__content__title,
	{
	color: #fff;
	}

	/* /deep/.u-popup__content,
	/deep/.u-modal__title {
		background: #090d15;
		color: #fff;
	} */

	.listBox {
		margin: 30rpx 30rpx 10vh;
		overflow: hidden;
		font-size: 15px;

		.aList {
			max-height: 30vh;
			overflow: scroll;
		}

		.item {
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			justify-content: space-between;
			align-items: center;

			.box {
				justify-content: space-between;
				align-items: center;
			}

			.icon1 {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50px;
				background: #45516d;
				color: #6468ff;
				line-height: 60rpx;
				text-align: center;
				font-family: fantasy;
				margin-right: 40rpx;
			}

			.info {
				line-height: 60rpx;
				font-weight: 600;
				width: 70%;

				.num {
					font-weight: 500;
				}
			}

			.item1 {
				background: #6a8bff;
				padding: 20rpx;
				margin-top: 35rpx;
			}


		}


	}

	.btnBox {
		position: fixed;
		bottom: 0;
		width: 100vw;
		left: 0vw;
		background: #f7fbfe;
		z-index: 10;
		display: flex;
		justify-content: space-between;

		.btn {
			margin: 20rpx auto;
			width: 80vw;
			background: #f5f7fa;
			border-radius: 20rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
		}

		.btn1 {
			background-color: #6a8bff;
		}
	}
</style>